<template>
  <div style="padding:30px;height:100%">
    <div class="page-wrap">
      <div class="img-header">
        <div class="page-heade-text">{{pageTitle}}</div>
        <div class="filter-wrap">
          <Checkbox
            ref="selectAllCheckbox"
            v-model="selectAllProject"
            title="仅选择当前页数据"
            @on-change="handleCheckAllPro"
            >选择所有</Checkbox
          >
          <Button type="error" ghost style="margin-left:5px;" @click="delAllProModelBtn"
            >批量删除</Button
          >
          <Button type="primary" ghost class="md-add-jh" @click="creatProBtn" style="margin-left:15px;"
            >创建任务</Button
          >
          <!-- <Checkbox  v-model="myProject" @click.native.prevent="queryCreateOrShare('myProject')" >
                        <span>由我创建</span>
                    </Checkbox > -->
          <Checkbox
            v-model="shareMe"
            @click.native.prevent="queryCreateOrShare('shareMe')"
            style="margin-left:15px;"
          >
            <span>分享给我</span>
          </Checkbox>
          <i-select
            clearable
            placeholder="全部状态"
            v-model="projectDelayStatus"
            style="width: 150px;margin-left:15px;"
            @on-change="changePro"
          >
            <i-option value="0">未部署</i-option>
            <i-option value="3">部署成功</i-option>
            <i-option value="4">删除中</i-option>
            <i-option value="6">部署失败</i-option>
            <i-option value="13">清空部署中</i-option>
            <i-option value="14">清空部署失败</i-option>
            <i-option value="17">工程导入失败</i-option>
            <i-option value="8">删除失败</i-option>
            <i-option value="15">部署校验中</i-option>
            <i-option value="9">部署中</i-option>
          </i-select>
          <!--<Select filterable clearable placeholder="全部工程" v-model="myAndAllProject" @on-change="changePro" style="width: 150px;margin-left:15px;">
                        <Option value="myProject">由我创建</Option>
                        <Option value="shareMe">分享给我</Option>
                    </Select>-->
          <Input
            v-model.trim="searchProjectname"
            placeholder="名称"
            clearable
            @on-change="searchProName"
            style="width: 180px;margin-left:15px;"
          />
          <Button
            class="header-btn"
            type="primary"
            ghost
            style="height: 32px;margin-left:15px;"
            @click="refreshProject()"
            ><i class="el-icon-refresh-right"
          /></Button>
        </div>
      </div>
      <div v-show="!showProjectList" style="padding:0 20px">
        <div class="empty">
          <div class="defGraph"></div>
          <div class="graphText">暂无任务</div>
        </div>
      </div>
      <div v-show="showProjectList" style="padding:0 20px 20px;height:100%;">
        <div class="content-wrap">
          <div class="project-item" v-for="(item, key) in projectList" :key="key">
            <div class="item-first-line">
              <div class="project-name-state">
                <p
                  style="margin-right:8px;width: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
                >
                  <Checkbox
                    v-model="item._checked"
                    @on-change="checkSinglePro($event, item)"
                  ></Checkbox>
                </p>
                <Tooltip :content="item.name" placement="top-start" max-width="400">
                  <div class="project-name">
                    {{ handleProIndex(key) }}.
                    <span style="cursor: pointer;" @click="goTopo(item)">{{ item.name }}</span>
                  </div>
                </Tooltip>
                <div class="project-status-text" :style="{ color: setColor(item.status) }">
                  {{ item.statusCHName }}
                  <Poptip trigger="hover" width="300" :content="item.errorMessage" word-wrap>
                    <Icon
                      v-if="item.errorMessage"
                      type="ios-help-circle"
                      color="rgb(203, 2, 54)"
                      style="cursor:'pointer'"
                    />
                  </Poptip>
                </div>
              </div>
              <div class="btn-icon-wrap">
                <Poptip
                  transfer
                  confirm
                  title="确定要删除吗？"
                  @on-ok="delProject(item)"
                  :style="setCanModifyClick(item)"
                >
                  <img :src="setDelSrc(item)" class="click-icon" alt="del" title="删除" />
                </Poptip>
                <img
                  :src="setModifySrc(item)"
                  :style="setCanModifyClick(item)"
                  class="click-icon"
                  style="margin: 0 10px;"
                  alt="modify"
                  title="修改"
                  @click="editProject(item)"
                />
                <Poptip
                  transfer
                  confirm
                  title="确定要清空部署吗？"
                  @on-ok="clearDpeloyBtn(item)"
                  :style="setCanClick(item)"
                >
                  <img
                    :src="setClearImgSrc(item)"
                    alt="clear"
                    class="click-icon"
                    title="清空部署"
                  />
                </Poptip>
                <img
                  :src="shareIcon"
                  style="margin: 0 10px;"
                  class="click-icon"
                  alt="share"
                  title="分享"
                  @click="shareProject(item)"
                />
                <img
                  :src="zonesIcon"
                  alt="zones"
                  class="click-icon"
                  title="可用域"
                  @click="clickZoneBtn(item)"
                />
              </div>
            </div>
            <div class="project-other-info">
              <p>
                <span>创建时间：</span>
                <span>{{ item.created }}</span>
              </p>
              <p style="margin: 0 15px;" class="display-flex">
                <span>虚拟机数量：</span>
                <Tooltip :content="item.vmCount" placement="top-start" :max-width="400">
                  <span style="width: 50px;" class="text-ellipsis">{{ item.vmCount }}</span>
                </Tooltip>
              </p>
              <p class="project-list-name display-flex">
                <span>创建者：</span>
                <Tooltip :content="item.creatorName" placement="top-start" :max-width="400">
                  <span style="width: 200px;" class="text-ellipsis">{{ item.creatorName }}</span>
                </Tooltip>
              </p>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;">
          <Page
            :total="proTotal"
            :page-size="proPageSize"
            :current="proPage"
            show-total
            show-elevator
            @on-change="proOnChange"
          />
        </div>
      </div>

      <!-- <div v-show="showDefImg1" class="defGraphWrap">
                <div class="defGraph"></div>
                <div class="graphText">暂无工程</div>
            </div> -->

      <!-- 创建工程 -->
      <Modal
        v-model="createProModal"
        width="600"
        :mask-closable="false"
        class="creatProModal"
        :footer-hide="true"
        title="创建任务"
        @on-visible-change="changeModal"
      >
        <Tabs v-model="tabName">
          <TabPane label="空白任务" name="name1">
            <creat-pro
              v-if="createProModal"
              pro-id=""
              pro-name=""
              @creatProModalStatus="conModalChange"
            ></creat-pro>
          </TabPane>
          <TabPane label="导入任务" name="name2">
            <p style="color:orange">注：只支持JSON文件</p>
            <div style="display: flex;justify-content: center;margin-top: 15px">
              <Upload
                ref="upload"
                :action="upLoadUrl"
                :headers="setUpLoadHead"
                :format="['json']"
                :on-format-error="handleFormatError"
                :before-upload="beforeUpload"
                :show-upload-list="false"
              >
                <Button icon="ios-cloud-upload-outline">选择文件</Button>
              </Upload>
              <div style="line-height: 3;margin-left: 5px;" v-if="uploadFile !== null">
                {{ uploadFile.name }}
              </div>
            </div>
            <div style="display: flex;justify-content: center;margin-top: 15px">
              <Button
                type="primary"
                @click="importProject"
                :loading="importProjectLoading"
                style="margin-right: 15px"
                >确定</Button
              >
              <Button @click="canleImportProModal">取消</Button>
            </div>
          </TabPane>
        </Tabs>
      </Modal>
      <!--修改工程-->
      <Modal v-model="editProjectModal" width="600" :mask-closable="false" title="修改任务">
        <div>
          <Form
            ref="reProjectForm"
            :model="reProjectForm"
            :rules="reProjectRuleValidate"
            :label-width="120"
          >
            <FormItem label="名称" prop="name">
              <Input v-model.trim="reProjectForm.name" placeholder="名称"></Input>
            </FormItem>
            <!-- <FormItem label="训练ID" prop="trainId">
                            <Input v-model.trim="reProjectForm.trainId" placeholder="训练ID"></Input>
                        </FormItem> -->
            <FormItem label="描述" prop="description">
              <Input
                v-model.trim="reProjectForm.description"
                type="textarea"
                :maxlength="200"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="描述"
              ></Input>
            </FormItem>
          </Form>
        </div>
        <div slot="footer">
          <Button @click="editProjectModal = false">取消</Button>
          <Button
            type="primary"
            @click="saveReProject('reProjectForm')"
            :loading="saveProjectLoading"
            >保存</Button
          >
        </div>
      </Modal>
      <!--工程分享-->
      <Modal
        v-model="shareProjectModal"
        width="1000"
        :mask-closable="false"
        :footer-hide="true"
        title="分享工程"
      >
        <Tabs :value="shareModelTabs" @on-click="changeShareTab">
          <TabPane label="管理" name="name1">
            <div style="height: 450px;overflow: auto">
              <Table
                border
                :columns="projectSharersCol"
                :data="projectSharersRow(projectSharersList)"
                @on-selection-change="selectDelProjectSharers"
              ></Table>
            </div>
            <Divider />
            <div class="share-foot-btn">
              <Poptip
                transfer
                confirm
                style="float: right"
                title="确定要删除这个单位人吗？"
                @on-ok="delProjectSharersBtn"
              >
                <Button
                  style="float: right;margin-left: 10px"
                  type="error"
                  :loading="delProjectSharersLoading"
                  :disabled="isCanDisabled"
                  >删除</Button
                >
              </Poptip>
              <Button style="float: right" @click="canleShareProModal">取消</Button>
            </div>
          </TabPane>
          <TabPane label="单位内分享" name="name2">
            <div>
              <div style="margin-bottom: 15px">
                <Input
                  v-model.trim="searchComMemInput"
                  placeholder="用户名"
                  style="width: 200px"
                  clearable
                  @on-change="searchComMem"
                />
              </div>
              <Table
                border
                :columns="groupMemCol"
                :data="groupMemRow(groupMemList)"
                height="430"
                @on-selection-change="selectionMemForGroup"
                :loading="shareProjectListLoading"
              ></Table>
              <div style="display: flex;justify-content: space-between;margin-top: 15px">
                <div>
                  <Button
                    style="margin-right: 15px"
                    type="primary"
                    @click="shareProjectBtn"
                    :loading="shareBtnLoading"
                    :disabled="isCanDisabled"
                    >保存</Button
                  >
                  <Button @click="canleShareProModal">取消</Button>
                </div>
                <Page
                  :total="groupTotal"
                  :page-size="groupPageSize"
                  :current="groupMemPage"
                  show-total
                  show-elevator
                  placement="top"
                  @on-change="groupOnChange"
                />
              </div>
            </div>
          </TabPane>
        </Tabs>
      </Modal>
      <!--管理工程可用域-->
      <Modal
        v-model="projectZoneModal"
        width="600"
        @on-visible-change="zoneModalStatus"
        :mask-closable="false"
        title="可用域管理"
      >
        <Tabs :value="saveTabName" @on-click="clickProTabs">
          <TabPane label="工程可用域" name="name1">
            <Table border :columns="projectZoneCol" :data="projectZoneList"></Table>
          </TabPane>
          <TabPane label="用户可用域" name="name2">
            <Table
              border
              :columns="userZonesCol"
              :data="userZonesRow(userZonesList)"
              @on-selection-change="selectUserZones"
            ></Table>
          </TabPane>
        </Tabs>
        <div slot="footer">
          <Button @click="canleReZoneProModal">取消</Button>
          <Button
            type="primary"
            @click="saveZoneModalBtn"
            :loading="reProjectZonesLoading"
            :disabled="isCanZoneDisabled"
            >保存</Button
          >
        </div>
      </Modal>
      <!--批量删除工程-->
      <Modal v-model="delProModel" width="600" :mask-closable="false" title="批量删除工程">
        <div>
          <div class="uploadTypeWrap">
            不支持删除的工程的状态有：待部署、删除中、部署中、待删除、清空部署中、部署校验中、工程导入中
          </div>
          <Tag color="error" type="border" v-for="item in this.selectAllProjects" :key="item.id">{{
            item.name
          }}</Tag>
        </div>
        <div slot="footer">
          <Button @click="delProModel = false">取消</Button>
          <Poptip
            transfer
            confirm
            style="float: right"
            title="确定要删除以上任务吗？"
            @on-ok="delAllPro"
          >
            <Button style="float: right;margin-left: 10px" type="error">删除</Button>
          </Poptip>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import $ from 'jquery';
import cookieUse from '@/libs/cookie.js';
import encryption from '@/libs/encryption.js';
import {
  modifyProject,
  delProject,
  queryProjectstatus,
  clearDeloyPro,
  queryShareOfPro,
  queryCompanyMembers,
  shareDesign,
  zoneOfProject,
  zoneOfuser,
  modifyZone
} from '@/api/homer.js';
import creatPro from '@/components/creatPage/creatProject';
import { getSceneList, modifyScene } from '@/api/drill_compete';
 import {validateName128 } from '@/libs/reg.js'
export default {
  components: { creatPro }, //boards
  data() {
    return {
      // 人员信息
      USER_ID: '',
      isRootDesigner: false,
      getToken: '',
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      // 显示省略图
      showDefImg1: false,
      showProjectList: false,
      // 工程列表
      proPage: 1,
      proPageSize: 10,
      searchProjectname: '',
      projectStatus: '',
      proDate: '',
      proTotal: 0,
      projectList: [],
      projectDelayStatus: 'allProject',
      myAndAllProject: 'allProject',
      myProject: true,
      shareMe: false,
      enableAll: '',
      isCreator: '',
      proStartTime: '',
      proEndTime: '',
      queryProjectID: '',
      // 保存中间状态的工程
      saveProjectStatusIdArr: [],
      // 创建工程
      createProModal: false,
      // 修改 删除工程
      editProjectModal: false,
      reProjectForm: {
        name: '',
        description: '',
        trainId: ''
      },
      reProjectRuleValidate: {
        name: [{ required: true, max: 128, message: '工程名称长度为1—128个字符', trigger: 'change' },{ validator: validateName128, trigger: 'change' }],
        description: [{ max: 200, message: '描述文字不能超过200个字符', trigger: 'change' }]
      },
      editProjectId: '',
      saveProjectLoading: false,
      editProCreatorId: '',
      // 批量删除功能
      selectAllProject: false,
      selectAllProjects: [],
      delProModel: false,
      delType: false,
      // 分享工程
      shareProId: '',
      projectCreatorId: '',
      shareProjectModal: false,
      groupMemPage: 1, // 单位内分享列表当前页
      groupTotal: 0,
      groupPageSize: 10,
      groupMemList: [],
      groupMemCol: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'userName',
          align: 'center'
        },
        {
          title: '昵称',
          key: 'nickname',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '角色',
          key: 'role',
          align: 'center'
        },
        {
          title: '是否在线',
          key: 'online',
          align: 'center'
        },
        {
          title: '描述',
          key: 'description',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created',
          align: 'center'
        }
      ],
      groupMemRow(val) {
        let data = [];
        for (let i = 0; i < val.length; i++) {
          let _disabled = false;
          if (this.USER_ID === val[i]['id'] && this.projectCreatorId === this.USER_ID) {
            _disabled = true;
          } else {
            _disabled = false;
          }
          data.push({
            userName: val[i]['username'],
            nickname: val[i]['nickname'],
            type: val[i]['type'],
            id: val[i]['id'],
            email: val[i]['email'],
            role: val[i]['role'],
            online: val[i]['online'],
            created: val[i]['created'],
            description: val[i]['description'],
            _disabled: _disabled
          });
        }
        return data;
      },
      getMemIdArr: [],
      searchComMemInput: '',
      shareBtnLoading: false,
      isDisableBtn: false,
      shareProjectListLoading: false,
      // 工程分享人
      projectSharersList: [],
      projectSharersRow(val) {
        let data = [];
        for (let i = 0; i < val.length; i++) {
          if (!val[i]['isCreator']) {
            data.push({
              creatorName: val[i]['creatorName'],
              creator: val[i]['creator']
            });
          }
        }
        return data;
      },
      isCanDisabled: true,
      delProjectSharersArr: [],
      delProjectSharersLoading: false,
      kickOutProjectLoading: false,
      shareModelTabs: 'name1',
      // 工程可用域
      projectZoneModal: false,
      zoneObj: {},
      saveTabName: 'name1',
      projectZoneId: '',
      projectZoneCreatorId: '',
      projectZoneList: [],
      projectZoneCol: [
        {
          title: '默认可用域',
          key: 'enableDefault',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Radio', {
                props: {
                  value: params.row.enableDefault
                },
                on: {
                  'on-change': () => {
                    this.changeRadio(params);
                  }
                }
              })
            ]);
          }
        },
        {
          title: '可用域名称',
          key: 'zone',
          align: 'center'
        },
        {
          title: '类型',
          key: 'vzType',
          align: 'center'
        },
        {
          title: '工程ID',
          key: 'projectId',
          align: 'center'
        }
      ],
      projectZoneRow(val) {
        let data = [];
        for (let i = 0; i < val.length; i++) {
          data.push({
            type: val[i]['type'],
            zone: val[i]['zone'],
            enableDefault: val[i]['enableDefault'],
            projectId: val[i]['projectId'],
            id: val[i]['id']
          });
        }
        return data;
      },
      selectProZoneArr: [],
      reProjectZonesLoading: false,
      isCanZoneDisabled: false,
      isCanReUserZone: false,
      saveProZonesName: [],
      defultProjectZoneId: '',
      // 用户可用域
      userZonesList: [],
      userZonesCol: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '可用域名称',
          key: 'zone',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        }
      ],
      userZonesRow(val) {
        let data = [];
        for (let i = 0; i < val.length; i++) {
          if (this.saveProZonesName.indexOf(val[i]['zone']) > -1) {
            data.push({
              isDefault: val[i]['isDefault'],
              zone: val[i]['zone'],
              companyName: val[i]['companyName'],
              type: val[i]['type'],
              companyId: val[i]['companyId'],
              _checked: true
            });
          } else {
            data.push({
              isDefault: val[i]['isDefault'],
              zone: val[i]['zone'],
              companyName: val[i]['companyName'],
              type: val[i]['type'],
              companyId: val[i]['companyId'],
              _checked: false
            });
          }
        }
        return data;
      },
      // 导入工程
      upLoadUrl: `${this.baseURL}/topo-edit/projects/json/async/file`,
      setUpLoadHead: { Authorization: this.getToken },
      uploadFile: null,
      importProjectLoading: false,
      // 按钮
      shareIcon: require('../../assets/project/shares-h.png'),
      zonesIcon: require('../../assets/project/zones-h.png'),
      tabName: 'name1'
    };
  },
  created() {},
  computed: {
    pageTitle () {
      //当前菜单显示名
      return this.$route.meta.title;
    },
    projectSharersCol() {
      let _this = this;
      let columns = [];
      if (this.projectCreatorId == this.USER_ID || this.isRootDesigner) {
        columns.push({
          type: 'selection',
          width: 60,
          align: 'center'
        });
        columns.push({
          title: '名称',
          key: 'creatorName',
          align: 'center'
        });
        columns.push({
          title: 'ID',
          key: 'creator',
          align: 'center'
        });
      } else {
        columns.push({
          type: 'index',
          width: 60,
          align: 'center'
        });
        columns.push({
          title: '名称',
          key: 'creatorName',
          align: 'center'
        });
        columns.push({
          title: 'ID',
          key: 'creator',
          align: 'center'
        });
        columns.push({
          title: 'Action',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '确定要退出该工程分享吗？'
                  },
                  on: {
                    'on-ok': () => {
                      this.signOutSharePro(params);
                    },
                    'on-cancel': () => {
                      // console.log('you clicked cancel.');
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'error',
                        size: 'small',
                        disabled: params.row.creator === this.USER_ID ? false : true
                      }
                    },
                    '退出'
                  )
                ]
              )
            ]);
          }
        });
      }
      return columns;
    }
  },
  mounted() {
    this.getToken = cookieUse.getCookie('desig-token');
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isCreator = November.userId;
    this.isRootDesigner = November.isRootDesigner;
    this.showProjectSelect = November.isRootDesigner;
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    this.getProjectList();
  },
  beforeDestroy() {
    clearInterval(this.proSetInterval);
  },
  methods: {
    // 设置高度
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
    },
    // 工程列表
    getProjectList() {
      clearInterval(this.proSetInterval);
      this.saveProjectStatusIdArr = [];
      // 是否是单位管理员
      let enableAll = '';
      // 是否是自己创建
      let creator = '';
      if (this.showProjectSelect) {
        enableAll = `&enableAll=true`;
      } else {
        enableAll = `&enableAll=${this.enableAll}`;
      }
      if (this.isCreator === '') {
      } else {
        creator = `&creator=${this.isCreator}`;
      }
      let id = '';
      if (this.queryProjectID != '') {
        id = `&id=${this.queryProjectID}`;
      }
      if (this.projectDelayStatus === 'allProject') {
        this.projectStatus = '';
      } else {
        this.projectStatus = this.projectDelayStatus;
      }
      if (this.projectStatus == undefined) {
        this.projectStatus = '';
      }
      this.axios
        .get(
          `${this.baseURL}/topo-edit/projects?pageIndex=${this.proPage}&pageSize=${this.proPageSize}&name=${this.searchProjectname}${id}&status=${this.projectStatus}${creator}&startTime=${this.proStartTime}&endTime=${this.proEndTime}${enableAll}`
        )
        .then((res) => {
          if (res.data.code === 1) {
            let attribute = res.data.data;
            // this.projectList = attribute.dataList
            this.proTotal = attribute.total;
            // 保存 工程id数组
            let dataList = attribute.items;
            if (dataList.length == 0 && this.proPage > 1) {
              this.proPage = this.proPage - 1;
              this.getProjectList();
              return;
            }
            for (let i = 0; i < dataList.length; i++) {
              if (
                dataList[i].statusCHName == '删除中' ||
                dataList[i].statusCHName == '部署中' ||
                dataList[i].statusCHName == '待删除' ||
                dataList[i].statusCHName == '清空部署中' ||
                dataList[i].statusCHName == '部署校验中' ||
                dataList[i].statusCHName == '工程导入中'
              ) {
                this.saveProjectStatusIdArr.push(dataList[i].id);
              }
            }
            this.projectList = dataList;
            this.projectList.forEach((user) => {
              if (this.selectAllProjects.map((user) => user.id).includes(user.id)) {
                this.$set(user, '_checked', true);
              } else {
                this.$set(user, '_checked', false);
              }
            });
            this.isCheckAll();
            if (this.saveProjectStatusIdArr.length > 0) {
              // 轮询中间状态的工程
              this.initQueryProState();
            }
            this.showProjectList = this.projectList.length > 0;
            this.showDefImg1 = false;
          } else if (res.data.code === -2) {
            this.projectList = [];
            this.proTotal = 0;
            this.showProjectList = false;
            this.showDefImg1 = true;
          } else {
            // this.$Message.info(res.data.message)
            this.showProjectList = false;
            this.showDefImg1 = true;
          }
        })
        .catch((err) => {
          console.log(err);
          this.showProjectList = false;
          this.showDefImg1 = true;
        });
    },
    // 设置工程状态颜色
    setColor(status) {
      let color = 'grey';
      switch (status) {
        case 0: // 未部署
          color = '#888';
          return color;
          break;
        case 3: // 部署成功
          color = '#06b649';
          return color;
          break;
        case 4: // 删除中
          color = '#ff4242';
          return color;
          break;
        case 6: // 部署失败
          color = '#ff4242';
          return color;
          break;
        case 8: // 删除失败
          color = '#fa9901';
          return color;
          break;
        case 9: // 部署中
          color = '#06b649';
          return color;
          break;
        case 12: // 待删除
          color = '#888';
          return color;
          break;
        case 13: // 清空部署中
          color = '#ff8244';
          return color;
          break;
        case 14: // 清空部署失败
          color = '#ff8244';
          return color;
          break;
        case 16: // 工程导入中
          color = '#088cf0';
          return color;
          break;
        case 17: // 工程导入失败
          color = '#cb0236';
          return color;
          break;
        case 15: // 部署校验中
          color = '#ff8244';
          return color;
          break;
      }
    },
    // 轮询中间状态工程
    initQueryProState() {
      this.proSetInterval = setInterval(() => {
        if (this.saveProjectStatusIdArr.length === 0) {
          clearInterval(this.proSetInterval);
          return false;
        }
        queryProjectstatus(this.saveProjectStatusIdArr[0])
          .then((res) => {
            if (res.data.code === 1) {
              let projectData = res.data.project;
              if (
                projectData.statusCHName != '删除中' &&
                projectData.statusCHName != '部署中' &&
                projectData.statusCHName != '待删除' &&
                projectData.statusCHName != '清空部署中' &&
                projectData.statusCHName != '部署校验中' &&
                projectData.statusCHName != '工程导入中'
              ) {
                this.$Message.info({
                  content: '操作成功',
                  duration: 3
                });
                this.saveProjectStatusIdArr.splice(0, 1);
                this.getProjectList();
              }
            } else if (res.data.code === -2) {
              this.saveProjectStatusIdArr.splice(0, 1);
              this.getProjectList();
            } else {
              this.$Message.warning({
                content: res.data.message,
                duration: 3
              });
              clearInterval(this.proSetInterval);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }, 3000);
    },
    // 过滤
    proOnChange(val) {
      this.proPage = val;
      //this.handleCheckAllPro(false)
      this.getProjectList();
    },
    queryCreateOrShare(val) {
      if (val == this.myAndAllProject) {
        this.myAndAllProject = 'allProject';
        if (val === 'myProject') {
          this.myProject = false;
        } else {
          this.shareMe = false;
        }
      } else {
        this.myAndAllProject = val;
        if (val === 'myProject') {
          this.myProject = true;
          this.shareMe = false;
        } else {
          this.myProject = false;
          this.shareMe = true;
        }
      }
      this.changePro();
    },
    changePro() {
      if (this.projectDelayStatus === 'allProject') {
        this.projectStatus = '';
      } else {
        this.projectStatus = this.projectDelayStatus;
      }

      this.proPage = 1;
      if (this.myAndAllProject === 'allProject') {
        if (this.isRootDesigner) {
          this.showProjectSelect = true;
        } else {
          this.showProjectSelect = false;
        }
        this.isCreator = '';
      } else if (this.myAndAllProject === 'myProject') {
        this.isCreator = this.USER_ID;
      } else if (this.myAndAllProject === 'shareMe') {
        this.isCreator = '-1';
      }
      this.getProjectList();
    },
    searchProName(val) {
      this.proPage = 1;
      this.searchProjectname = this.searchProjectname;
      this.getProjectList();
    },
    // 刷新工程
    refreshProject() {
      this.proPage = 1;
      this.projectDelayStatus = 'allProject';
      this.myAndAllProject = 'allProject';
      this.proStartTime = '';
      this.proEndTime = '';
      this.proDate = '';
      this.searchProjectname = '';
      this.isCreator = '';
      this.projectStatus = '';
      this.queryProjectID = '';
      this.queryTaskId = '';
      this.myProject = false;
      this.shareMe = false;
      this.selectAllProjects = [];
      //this.handleCheckAllPro(false)
      this.getProjectList();
    },
    // 计算index
    handleProIndex(key) {
      return (this.proPage - 1) * this.proPageSize + key + 1;
    },
    // 跳转
    goTopo(row) {
      let stateText = row.statusCHName;
      if (stateText === '工程导入中') {
        this.$Message.info({
          content: '该工程正在导入中...',
          duration: 3
        });
        return false;
      } else if (stateText === '删除中') {
        this.$Message.info({
          content: '该工程正在删除中...',
          duration: 3
        });
        return false;
      } else if (stateText === '工程导入失败') {
        this.$Message.info({
          content: '该工程导入失败！',
          duration: 3
        });
        return false;
      }
      window.openTrain(`/jjzzTopo/index.html#/ProjectViews?projectId=${row.id}`);
    },
    // 新建工程
    creatProBtn() {
      this.uploadFile = null;
      this.createProModal = true;
    },
    conModalChange() {
      this.createProModal = false;
      this.refreshProject();
    },
    // 修改
    editProject(item) {
      this.editProjectModal = true;
      this.editProjectId = item.id;
      this.reProjectForm.name = item.name;
      this.reProjectForm.description = item.description;
      this.reProjectForm.trainId = item.trainId ? item.trainId + '' : '';
    },
    saveReProject(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.reProjectForm.id = this.editProjectId;
          this.saveProjectLoading = true;
          modifyProject(this.reProjectForm)
            .then((res) => {
              this.saveProjectLoading = false;
              if (res.data.code === 1) {
                this.editProjectId = '';
                this.editProjectModal = false;
                this.getProjectList();
                // this.$emit('setSceneUpdate',false)
                // 需要同步修改场景关联的工程名称
                getSceneList({
                  pageIndex: 1,
                  pageSize: 2147483646,
                  projectId: res.data.attribute.projectIn.id
                })
                  .then(({ code, message, data }) => {
                    if (code === 1) {
                      let items = data.items || [];
                      if (items.length) {
                        Promise.all(
                          items.map((item) => {
                            return modifyScene(item.id, {
                              id: item.id,
                              projectName: res.data.attribute.projectIn.name
                            });
                          })
                        ).then((resList) => {
                          if (resList.some((res) => res.code !== 1)) {
                            this.$Message.warning('工程修改成功，级联修改竞赛、演练场景失败');
                          } else {
                            // 级联修改也成功了
                            this.$Message.info('工程修改成功');
                          }
                        });
                      } else {
                        // 无需级联修改，提示修改成功
                        this.$Message.info('工程修改成功');
                      }
                    } else {
                      this.$Message.warning(`工程修改成功，${message}，级联修改竞赛、演练场景失败`);
                    }
                  })
                  .catch(() => {
                    this.$Message.error(`工程修改成功，级联修改竞赛、演练场景异常`);
                  });
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 3
                });
              }
            })
            .catch((err) => {
              console.log(err);
              this.saveProjectLoading = false;
              this.$Message.error('服务器连接失败！');
            });
        } else {
          this.$Message.error('请填写符合验证规则的内容');
        }
      });
    },
    // 删除工程
    delProject(item) {
      delProject(item.id)
        .then((res) => {
          if (res.data.code === 1) {
            if (!this.delProModel) {
              this.$Message.info({
                content: '操作成功',
                duration: 3
              });
            }
            this.selectAllProjects = [];
            this.getProjectList();
            // this.$emit('setSceneUpdate',false)
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    // 选中当前页所有工程
    handleCheckAllPro(e) {
      this.selectAllProject = e;
      this.projectList.forEach((item) => {
        this.checkSinglePro(e, item);
      });
    },
    checkSinglePro(e, item) {
      // 以下状态不可选择：待部署2 删除中4 部署中9 待删除12 清空部署中13 部署校验中15 工程导入中16
      if (
        item.status == 2 ||
        item.status == 4 ||
        item.status == 9 ||
        item.status == 12 ||
        item.status == 13 ||
        item.status == 15 ||
        item.status == 16
      ) {
        return false;
      }
      if (e && !this.selectAllProjects.map((item) => item.id).includes(item.id)) {
        this.selectAllProjects.push(item);
      } else if (!e && this.selectAllProjects.map((item) => item.id).includes(item.id)) {
        let index = this.selectAllProjects.findIndex((pro) => pro.id == item.id);
        this.selectAllProjects.splice(index, 1);
      }
      this.$set(item, '_checked', e);
      this.isCheckAll();
    },
    isCheckAll() {
      //是否checkAll
      let enableCheckPro = this.projectList
        .filter((item) => {
          return !(
            item.status == 2 ||
            item.status == 4 ||
            item.status == 9 ||
            item.status == 12 ||
            item.status == 13 ||
            item.status == 15 ||
            item.status == 16
          );
        })
        .map((item) => item.id);
      let checkPro = this.projectList.filter((item) => item._checked).map((item) => item.id);
      this.selectAllProject =
        enableCheckPro.length !== 0 &&
        enableCheckPro.length === checkPro.length &&
        enableCheckPro.every((a) => checkPro.some((b) => a === b)) &&
        checkPro.every((_b) => enableCheckPro.some((_a) => _a === _b));
    },
    delAllProModelBtn() {
      if (this.selectAllProjects.length === 0) {
        this.$Message.info({
          content: '请选择要删除的工程',
          duration: 3
        });
        return false;
      }
      this.delProModel = true;
    },
    delAllPro() {
      this.$Message.info({
        content: '删除中',
        duration: 5
      });
      for (let i = 0; i < this.selectAllProjects.length; i++) {
        this.delProject(this.selectAllProjects[i]);
      }
      this.$refs.selectAllCheckbox.checkboxClasses[1]['ivu-checkbox-checked'] = false;
      setTimeout(() => {
        this.delProModel = false;
      }, 2000);
    },
    // 清空部署
    clearDpeloyBtn(item) {
      if (
        item.statusENName === 'deploySuccess' ||
        item.statusENName === 'deployFailure' ||
        item.statusENName === 'cleanError' ||
        item.statusENName === 'deleteError'
      ) {
        this.clearDpeloy(item.id);
      } else {
        this.$Message.info({
          content: '当前工程不能清空部署！',
          duration: 3
        });
      }
    },
    clearDpeloy(id) {
      let params = {
        projectId: id
      };
      clearDeloyPro(id, params)
        .then((res) => {
          if (res.data.code === 1) {
            this.$Message.success({
              content: '操作成功',
              duration: 3
            });
            this.getProjectList();
          } else if (res.data.code === 3) {
            this.$Message.warning({
              content: res.data.message,
              duration: 3
            });
            this.getProjectList();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    setCanClick(item) {
      let statusFlag = false;
      let text = item.statusCHName;
      if (
        text === '部署成功' ||
        text === '部署失败' ||
        text === '清空部署失败' ||
        text === '删除失败'
      ) {
        statusFlag = true;
      }
      if (statusFlag && (item.creator === this.USER_ID || this.isRootDesigner)) {
      } else {
        return { 'pointer-events': 'none' };
      }
    },
    setClearImgSrc(item) {
      let statusFlag = false;
      let text = item.statusCHName;
      if (
        text === '部署成功' ||
        text === '部署失败' ||
        text === '清空部署失败' ||
        text === '删除失败'
      ) {
        statusFlag = true;
      }
      if (statusFlag && (item.creator === this.USER_ID || this.isRootDesigner)) {
        return require('../../assets/project/clears-h.png');
      } else {
        return require('../../assets/project/clears.png');
      }
    },
    // 分享工程   管理分享
    shareProject(value, index) {
      // 联盟内分享用到的工程名
      this.shareModelTabs = 'name1';
      this.showIpItem = false;
      this.shareProId = value.id;
      this.projectCreatorId = value.creator;
      this.shareProjectModal = true;
      if (this.projectCreatorId === this.USER_ID || this.isRootDesigner) {
        this.isCanDisabled = false;
      } else {
        this.isCanDisabled = true;
        this.$Message.info({
          content: '只有工程创建者或者单位管理员才能操作！',
          duration: 2
        });
      }
      this.projectSharersData();
      this.groupMemPage = 1;
      this.searchComMemInput = '';
      this.groupMemberData();
    },
    projectSharersData() {
      this.projectSharersList = [];
      queryShareOfPro(this.shareProId)
        .then((res) => {
          if (res.data.code === 1) {
            this.projectSharersList = res.data.attribute.result;
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    selectDelProjectSharers(val) {
      this.delProjectSharersArr = [];
      for (let i = 0; i < val.length; i++) {
        this.delProjectSharersArr.push(val[i]['creator']);
      }
    },
    delProjectSharersBtn() {
      if (this.delProjectSharersArr.length > 0) {
        this.delProjectSharersLoading = true;
        $.ajax({
          url: `${this.baseURL}/topo-edit/project/${this.shareProId}/kickOut`,
          type: 'delete',
          headers: { Authorization: this.getToken },
          contentType: 'application/json',
          data: JSON.stringify(this.delProjectSharersArr),
          success: (res) => {
            this.delProjectSharersLoading = false;
            if (res.code === 1) {
              this.$Message.success({
                content: '删除成功',
                duration: 3
              });
              this.projectSharersData();
              this.delProjectSharersArr = [];
              // 如果是单位管理员 则调用工程列表
              if (this.isRootDesigner) {
                this.getProjectList();
              }
            } else {
              this.$Message.error({
                content: res.message,
                duration: 3
              });
            }
          },
          error: (err) => {
            this.delProjectSharersLoading = false;
            console.log(err);
            this.$Message.error('服务器连接失败！');
          }
        });
      } else {
        this.$Message.info({
          content: '请选择删除的对象！',
          duration: 3
        });
      }
    },
    changeShareTab(name) {
      this.shareModelTabs = name;
      // this.alliFormValidate.deviceid = ''
      this.deviceArr = [];
      if (name === 'name1') {
        this.projectSharersData();
      }
    },
    signOutSharePro(params) {
      let delArr = [];
      delArr.push(params.row.creator);
      this.kickOutProjectLoading = true;
      $.ajax({
        url: `${this.baseURL}/topo-edit/project/${this.shareProId}/kickOut`,
        type: 'delete',
        headers: { Authorization: this.getToken },
        contentType: 'application/json',
        data: JSON.stringify(delArr),
        success: (res) => {
          if (res.code === 1) {
            this.$Message.success({
              content: '退出成功',
              duration: 3
            });
            this.shareProjectModal = false;
            this.getProjectList();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
          this.kickOutProjectLoading = false;
        },
        error: (err) => {
          this.kickOutProjectLoading = false;
          this.$Message.error('服务器连接失败！');
        }
      });
    },
    // 分享
    groupMemberData() {
      this.shareProjectListLoading = true;
      let params = {
        pageIndex: this.groupMemPage,
        pageSize: this.groupPageSize,
        type: 'designer',
        order: 'desc',
        sortBy: 'created'
      };
      if (this.searchComMemInput != '') {
        params.username = this.searchComMemInput;
      }
      queryCompanyMembers(params)
        .then((res) => {
          if (res.data.code == 1) {
            let getData = res.data.data;
            this.groupTotal = getData.total;
            this.groupMemList = getData.items;
          }
          this.shareProjectListLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.shareProjectListLoading = false;
        });
    },
    groupOnChange(val) {
      this.groupMemPage = val;
      this.groupMemberData();
    },
    searchComMem(val) {
      this.groupMemPage = 1;
      this.searchComMemInput = this.searchComMemInput;
      this.groupMemberData();
    },
    selectionMemForGroup(val) {
      this.getMemIdArr = [];
      for (let i = 0; i < val.length; i++) {
        this.getMemIdArr.push(val[i]['id']);
      }
    },
    shareProjectBtn() {
      if (this.getMemIdArr.length > 0) {
        this.shareBtnLoading = true;
        shareDesign(this.shareProId, this.getMemIdArr)
          .then((res) => {
            if (res.data.code === 1) {
              this.$Message.success({
                content: '分享成功！',
                duration: 3
              });
              this.getMemIdArr = [];
            } else {
              this.$Message.warning({
                content: res.data.message,
                duration: 3
              });
            }
            this.shareBtnLoading = false;
          })
          .catch((err) => {
            this.shareBtnLoading = false;
            this.$Message.error('服务器连接失败！');
          });
      } else {
        this.$Message.info({
          content: '请选择分享对象！',
          duration: 3
        });
      }
    },
    canleShareProModal() {
      this.shareProjectModal = false;
      this.shareProId = '';
      this.projectCreatorId = '';
    },
    // 可用域
    clickZoneBtn(item) {
      this.projectZoneModal = true;
      this.zoneObj = item;
      this.queryProjectZone(this.zoneObj);
    },
    clickProTabs(val) {
      this.saveTabName = val;
      if (val === 'name1') {
        this.queryProjectZone(this.zoneObj);
      } else if (val === 'name2') {
        this.showUserZonesBtn();
      }
    },
    zoneModalStatus(val) {
      if (!val) {
        this.zoneObj = {};
        this.reProjectZonesLoading = false;
      }
    },
    saveZoneModalBtn() {
      this.reProjectZonesLoading = true;
      if (this.saveTabName === 'name1') {
        this.reProjectZonesBtn();
      } else if (this.saveTabName === 'name2') {
        this.userZonesBtn();
      }
    },
    // 工程可用域列表
    queryProjectZone(item) {
      this.projectZoneId = item.id;
      this.projectZoneCreatorId = item.creator;
      this.projectZoneList = [];
      this.saveProZonesName = [];
      // 当前域
      this.selectProZoneArr = [];
      // 是否禁止修改按钮
      if (this.USER_ID === this.projectZoneCreatorId || this.isRootDesigner) {
        this.isCanZoneDisabled = false;
        this.isCanReUserZone = false;
      } else {
        this.isCanZoneDisabled = true;
        this.isCanReUserZone = true;
        this.$Message.info({
          content: '只有工程创建者或者单位管理员才能操作！',
          duration: 2
        });
      }
      // 工程可用域
      zoneOfProject(this.projectZoneId)
        .then((res) => {
          if (res.data.code === 1) {
            this.projectZoneList = res.data.attribute.result;
            // 保存一个默认可用域id
            this.defultProjectZoneId = res.data.attribute.result[0].id;
            for (let i = 0; i < this.projectZoneList.length; i++) {
              this.saveProZonesName.push(this.projectZoneList[i]['zone']);
              let objData = {
                enableDefault: this.projectZoneList[i]['enableDefault'],
                type: this.projectZoneList[i]['vzType'],
                zone: this.projectZoneList[i]['zone']
              };
              this.selectProZoneArr.push(objData);
            }
          } else {
            this.projectZoneList = [];
            this.defultProjectZoneId = '';
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    // 保存按钮
    reProjectZonesBtn() {
      $.ajax({
        url: `${this.baseURL}/topo-edit/zones/project/${this.projectZoneId}/zones/${this.defultProjectZoneId}`,
        type: 'put',
        contentType: 'application/json',
        headers: { Authorization: this.getToken },
        data: {},
        success: (res) => {
          if (res.code === 1) {
            this.$Message.success('工程默认域设置成功！');
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
          this.reProjectZonesLoading = false;
        },
        error: (err) => {
          console.log(err);
          this.reProjectZonesLoading = false;
          this.$Message.error('服务器连接失败！');
        }
      });
    },
    canleReZoneProModal() {
      this.projectZoneModal = false;
    },
    changeRadio(params) {
      console.log(params);
      this.defultProjectZoneId = '';
      let type = params.row.vzType;
      let id = params.row.id;
      for (let i = 0; i < this.projectZoneList.length; i++) {
        if (type === this.projectZoneList[i].vzType && id != this.projectZoneList[i].id) {
          this.projectZoneList[i].enableDefault = false;
        } else if (id === this.projectZoneList[i].id) {
          this.projectZoneList[i].enableDefault = true;
          this.defultProjectZoneId = id;
        }
      }
    },
    // 用户可用域
    showUserZonesBtn() {
      this.userZonesList = [];
      zoneOfuser()
        .then((res) => {
          if (res.data.code === 1) {
            this.userZonesList = res.data.data;
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    selectUserZones(val) {
      let _this = this;
      this.selectProZoneArr = [];
      for (let i = 0; i < val.length; i++) {
        let obj = {};
        obj.enableDefault = false;
        obj.type = val[i]['type'];
        obj.zone = val[i]['zone'];
        this.selectProZoneArr.push(obj);
      }
    },
    userZonesBtn() {
      if (this.selectProZoneArr.length > 0) {
        modifyZone(this.projectZoneId, this.selectProZoneArr)
          .then((res) => {
            if (res.data.code === 1) {
              this.$Message.success({
                content: '设置成功！',
                duration: 3
              });
              this.saveTabName = 'name1';
              this.clickProTabs('name1');
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 3
              });
            }
            this.reProjectZonesLoading = false;
          })
          .catch((err) => {
            console.log(err);
            this.reProjectZonesLoading = false;
            this.$Message.error('服务器连接失败！');
          });
      } else {
        this.$Message.info({
          content: '请至少选择一个可用域！',
          duration: 3
        });
        this.reProjectZonesLoading = false;
      }
    },
    // 导入工程
    beforeUpload(file) {
      this.uploadFile = file;
    },
    importProject() {
      let formData = new window.FormData();
      formData.append('file', this.uploadFile);
      if (!this.uploadFile) {
        this.$Message.error({
          content: '请选择文件',
          duration: 3
        });
        return false;
      }
      this.importProjectLoading = true;
      this.axios
        .post(`${this.baseURL}/topo-edit/projects/json/async/file`, formData, {
          headers: { 'Content-Type': 'application/json' }
        })
        .then((res) => {
          if (res.data.code === 1) {
            let result = res.data.attribute.result;
            this.importProjectLoading = false;
            this.$Message.info({
              content: '工程导入中',
              duration: 2
            });
            this.createProModal = false;
            this.refreshProject();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
            this.importProjectLoading = false;
          }
        })
        .catch((err) => {
          this.importProjectLoading = false;
          console.log(err);
        });
    },
    canleImportProModal() {
      this.importProjectLoading = false;
      this.createProModal = false;
      this.uploadFile = null;
    },
    // 修改
    setCanModifyClick(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return { 'pointer-events': 'none' };
      }
    },
    setModifySrc(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return require('../../assets/project/modifys.png');
      } else {
        return require('../../assets/project/modifys-h.png');
      }
    },
    setDelSrc(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return require('../../assets/project/delNote-d.png');
      } else {
        return require('../../assets/project/delNote-h.png');
      }
    },
    // 限制上传类型
    handleFormatError(file, fileList) {
      this.uploadFile = null;
      this.$Message.error({
        content: '不支持当前文件类型，请选择json文件',
        duration: 3
      });
      return false;
    },
    changeModal() {
      this.tabName = 'name1';
    }
  }
};
</script>
<style scoped>
.page-wrap {
  background-color: #fff;
  border-radius: 4px;
  height: 100%;
}
.img-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0 20px;
  margin-bottom: 15px;
}
.page-heade-text {
  font-weight: 700;
  font-size: 18px;
}
.filter-wrap {
  display: flex;
  justify-content: flex-end;
  width: calc(100% - 75px);
  align-items: center;
  padding-left: 10px;
}
.content-wrap {
  height: calc(100% - 95px);
  width: 100%;
  font-size: 14px;
  overflow-x: hidden;
}
.content-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.content-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.content-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.project-item {
  width: 100%;
  border-radius: 4px;
  border: 2px solid rgb(231, 231, 241);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.item-first-line {
  display: flex;
  justify-content: space-between;
}
.project-name-state {
  display: flex;
  justify-content: flex-start;
}
.project-name {
  font-size: 16px;
  color: #1563C2 ;
  font-weight: 600;
  width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.empty {
  margin: 100px 0;
}
/*缺省图*/
.defGraphWrap {
  width: 157px;
  height: 200px;
  margin: 0 auto;
  margin-top: 20px;
}
.defGraph {
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
  margin: auto;
}
.project-status-text {
  color: #333;
  font-weight: 600;
  font-size: 14px;
  margin-left: 20px;
}
.btn-icon-wrap {
  display: flex;
  justify-content: end;
}
.click-icon {
  cursor: pointer;
  height: 22px;
}
.project-other-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  color: #adadad;
  font-weight: bold;
}
/* 省略图 */
.defGraphWrap {
  width: 157px;
  height: 180px;
  margin: 0 auto;
}
.defGraph {
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
}
.graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}
.uploadTypeWrap {
  color: orange;
  margin-bottom: 16px;
}
</style>
<style>
.creatProModal .ivu-modal-mask {
  z-index: 1001 !important;
}
.creatProModal .ivu-modal-wrap {
  z-index: 1001 !important;
}
</style>
